<!-- PlayOne.vue -->
<template>
  <div class="play-section">
    <h2 class="play-title">
      <span>{{ title }}</span>
      <el-button type="primary" @click="saveAs" :loading="loading">保存</el-button>
    </h2>

    <div>
      <el-input placeholder="请输入名称" class="input-with-select" style="width: 100%; margin: 3px 0 10px 0" v-model="form.buyName">
        <el-button slot="prepend">用户名称</el-button>
      </el-input>
    </div>

    <div class="dis-flex">
      <el-input
        type="textarea"
        v-model="form.baseBuyNo"
        @input="handleInput"
        show-word-limit
        maxlength="20000"
        :autosize="{ minRows: 6, maxRows: 8 }"
        placeholder="请输入直选号码，系统将自动提取3位数字组合"
      >
      </el-input>
    </div>
    <div style="margin-top: 15px">
      <el-input placeholder="请输入直选数" class="input-with-select" min="0" style="width: 20%; margin-right: 10px" type="number"  @input="validateMultiple" v-model="form.multiple">
        <el-button slot="append">直</el-button>
      </el-input>

      <el-input placeholder="请输入组数" class="input-with-select" min="0" style="width: 20%; margin-right: 20px" type="number" @input="validateBuyGroup" v-model="form.buyGroup">
        <el-button slot="append">组</el-button>
      </el-input>
    </div>
    <div >
        <p class="result-text">提取结果：
            <span style="padding:10px;" v-for="(value, index) in (form.lotteryNo || '').split(',')" :key="index">{{ value }}</span>
        </p>
        <p v-if="form.lotteryNo">
            共<span class="font-red">{{ (form.lotteryNo || '').split(',').length }}</span>组
        </p>
    </div>
    <CustomDialog @close="form = {}" ref="CustomDialog"></CustomDialog>
  </div>
</template>

<script>
import { saveAs } from "file-saver";
import { saveLotteryVo } from "@/api/bussiness";
import CustomDialog from "../modules/CustomDialog.vue";
export default {
  name: "PlayOne",
  components: {
    CustomDialog,
  },
  props: {
    // 接收父组件传入的初始值
    noArrStr: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    lotteryType: {
      type: String,
      default: "",
    },

    lotteryNo: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      form: {
        baseBuyNo: "",
        lotteryNo: "",
        groupValue: "",
        buyGroup: 0, //购买组
        multiple: 0, //购买直
        buyName: "", //用户名称
      },
    };
  },
  watch: {
    // 监听父组件传入的值变化
    noArrStr(val) {
      this.form.baseBuyNo = val;
    },
  },
    methods: {
     validateMultiple(value) {
    // 确保输入值不小于0
    if (value < 0) {
      this.form.multiple = 0;
    }
  },
     validateBuyGroup(value) {
    // 确保输入值不小于0
    if (value < 0) {
        this.form.buyGroup = 0;

    }
  },
    saveAs() {
      this.loading = true;

      if (!this.form.buyName) {
          this.$message.error("请输入" + this.title + "名称！");
          this.loading = false;
        return;
      }
      if (!this.form.multiple) {
          this.$message.error("请输入" + this.title + "直！");
          this.loading = false;
        return;
      }

      /* if (!this.form.buyGroup) {
          this.$message.error("请输入" + this.title + "组！");
          this.loading = false;
        return;
      } */
      if (!this.form.lotteryNo) {
          this.$message.error("请输入" + this.title + "彩票单号");
          this.loading = false;
        return;
      }
      this.form.lotteryType = this.lotteryType;

      saveLotteryVo(this.form).then(res => {
        if (res.code == 200) {
          this.$message.success("保存成功！");
          this.$refs.CustomDialog.open(this.form);
            this.form = {
                buyGroup:0,
                multiple:0,
            };

            this.$emit('close')
          this.loading = false;
        } else
        {
            console.log("我保存失败了");
          this.$message.error("保存失败！");
             this.form = {
                buyGroup:0,
                multiple:0,
            };
                 this.$emit('close')
          this.loading = false;
        }
      });
 this.loading = false;
      console.log(this.form);
    },
    handleInput(value) {
      this.form.baseBuyNo = value;
      this.extractNumbers(value);
    },

    extractNumbers(values) {
      const numbers = values.replace(/\D/g, "");
      this.form.lotteryNo = this.chunkString(numbers, 3);
    },

    chunkString(str, size) {
      const chunks = [];
      for (let i = 0; i < str.length; i += size) {
        chunks.push(str.slice(i, i + size));
      }
      const reBack = chunks.filter(chunk => chunk.length === size);
      return reBack.length > 0 ? reBack.join(",") : "";
    },
  },
};
</script>

<style scoped>
.result-text {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: auto;
  max-width: 100%;
  margin-top: 10px;
  padding: 5px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #f9f9f9;
}
.play-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
}

.play-title {
  font-size: 18px;
  color: #409eff;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  margin: 5px 0 10px 0;
  padding-bottom: 10px;
}

.dis-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.font-red {
  color: rgb(226, 24, 24);
  font-weight: 700;
  margin: 0 5px;
  font-size: 19px;
}

.input-with-select ::v-deep .el-input-group__append {
  background-color: #409eff;
  color: white;
  border-color: #409eff;
}
</style>
